<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叶琪</title>
    <style>
        /* 字全部大写 */
        p.uppercase{
            text-transform:uppercase;
        }
        /* 小写 */
        p.lowercase{
            text-transform: lowercase;
        }
        /* 首字母大写 */
        p.capitalize{
            text-transform: capitalize;
        }

        /* 文本缩进属性是用来指定文本的第一行的缩进 */
        p{
            text-indent: 50px;
        }

        /* 字符间距 */
        h1{
            letter-spacing: 2px;
        }
        h2{
            letter-spacing: -3px;
        }

        /* 行高 */
        p.small{
            line-height: 70%;
        }
        p.big{
            line-height: 200%;
        }

        /* 设置元素的文本方向 */
        div.ex1{direction: rtl;}
    </style>
</head>
<body>
    <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
    
    <p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

<p>
    这是一个标准行高的段落。<br>
    这是一个标准行高的段落。<br>
    大多数浏览器的默认行高约为110%至120%。<br>
    </p>
    
    <p class="small">
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    </p>
    
    <p class="big">
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    </p>
    
    <div>一些文本，默认书写方向</div>
    <div class="ex1">一些文本，默认书写方向</div>
</body>
</html>